<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-03-30 
 -->


<template>
  <el-row id="popup-info">
    <i @click="popup.setPosition(undefined)" />
    <template v-for="val, key of featureInfo">
      <el-col v-if="val">{{key}}：{{val}}</el-col>
    </template>
    <el-col><el-link type="danger" @click="linkBtnClick(featureInfo)">危险链接</el-link></el-col>
    <el-col class="corner" />
  </el-row>
</template>

<script>
import { popOverlay } from "../utils";
import eventBus, { FLY_DISTRICTS, FEATURE_EFFECT, SPACE_QUERY, RANDOM_POINT } from "../bus";
export default {
  name: 'Popup',
  data() {
    return {
      popup: null,
    };
  },
  props: {
    map: { type: Object, require: true },
    featureInfo: { type: Object, require: true, default: () => ({}) },
  },
  mounted() {},

  methods: {
    linkBtnClick(Info) {
      eventBus.$emit(RANDOM_POINT, Info);
    }
  },
  watch: {
    map() {
      if (this.popup) return;
      const popup = popOverlay();
      this.map.addOverlay(popup);
      this.popup = popup;
    }
  }
  //  End
}

</script>

<style lang='scss' scoped>
#popup-info {
  background-color: #fff;
  color: #000;
  border-radius: 15px;
  min-width: 220px;
  max-width: 360px;
  padding: 15px 33px 15px 15px;
  i {
    position: absolute;
    top: 18px;
    right: 10px;
    width: 18px;
    height: 18px;
    background: url("~../utils/img/close.png") no-repeat;
    background-size: contain;
    cursor: pointer;
  }
  .el-col {
    &:not(:last-child) {
      display: inline-block;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
    }
    &:last-child {
      width: 0;
      border-width: 26px 15px 10px 0px;
      border-style: solid;
      border-color: #fff transparent transparent;
      position: absolute;
      left: 30px;
      bottom: -37px;
    }
  }
}
</style>